<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .banner1 {width: 1000px;height: 300px;margin: 0 auto;position: relative;overflow: hidden;}
        .banner1 .imgbox{width: 1000px;height: 300px;}
        .banner1 .imgbox img{width: 1000px;height: 300px;position: absolute;left:1000px;top:0;}
        .banner1 .imgbox img:first-child{left:0;}

        .banner1 .btns *{position: absolute;top:130px;width: 40px;height: 40px;border: none;background: rgba(200,200,200,0.6);}
        .banner1 #left{left:0}
        .banner1 #right{right:0}

        .banner1 .list{display: flex;background: rgba(200,200,200,0.6);height: 30px;line-height:30px;text-align: center;position: absolute;bottom: 0;left:0;width: 100%;}
        .banner1 .list span{flex: 1;border-left:solid 1px #fff;border-right:solid 1px #fff;cursor: pointer}
        .banner1 .list span.active{background: red;color:#fff;}

        .banner2 {width: 500px;height: 150px;margin: 0 auto;position: relative;overflow: hidden;}
        .banner2 .imgbox{width: 500px;height: 150px;}
        .banner2 .imgbox img{width: 500px;height: 150px;position: absolute;left:500px;top:0;}
        .banner2 .imgbox img:first-child{left:0;}

        .banner2 .btns *{position: absolute;top:60px;width: 30px;height: 30px;border: none;background: rgba(200,200,200,0.6);}
        .banner2 #left{left:0}
        .banner2 #right{right:0}

        .banner2 .list{display: flex;background: rgba(200,200,200,0.6);height: 30px;line-height:30px;text-align: center;position: absolute;bottom: 0;left:0;width: 100%;justify-content: center}
        .banner2 .list span{background: rgb(100,100,100);cursor: pointer;width: 20px;height: 20px;border-radius: 50%;margin: 0 20px;}
        .banner2 .list span.active{background: red;color:#fff;}

    </style>
</head>
<body>
    <div class="banner1"></div>
    <div class="banner2"></div>
</body>
<script src="./jquery.js"></script>
<script>
    // var $ = "hello";
</script>
<script src="./jquery.banner.js"></script>
<script>

    const imgs = [{
        "title":"1",
        "alt":"1",
        "src":"./imgs/banner1.jpg"
    },{
        "title":"2",
        "alt":"2",
        "src":"./imgs/banner2.jpg"
    },{
        "title":"3",
        "alt":"3",
        "src":"./imgs/banner3.jpg"
    },{
        "title":"4",
        "alt":"4",
        "src":"./imgs/banner4.jpg"
    },{
        "title":"5",
        "alt":"5",
        "src":"./imgs/banner5.jpg"
    },{
        "title":"6",
        "alt":"6",
        "src":"./imgs/banner6.jpg"
    },{
        "title":"7",
        "alt":"7",
        "src":"./imgs/banner7.jpg"
    }]

    $(".banner1").banner(imgs,{
        btn:false,
        list:false,
        moveTime:200,
        delayTime:2000
    });
    
    $(".banner2").banner(imgs);
</script>
</html>